<template>
  <div class="hello">
    <ul>
      <router-link tag="li" to="sy">
        <p class="iconfont icon-SSS sss"></p>
        <span>首页</span>
      </router-link>
      <router-link tag="li" to="faxian">
        <p class="iconfont icon-faxian1 fx"></p>
        <span>发现</span>
      </router-link>
      <router-link tag="li" to="dingdan">
        <p class="iconfont icon-icon- ic"></p>
        <span>订单</span>
      </router-link>
      <router-link tag="li" to="wode">
        <p class="iconfont icon-profile pr"></p>
        <span>我的</span>
      </router-link>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
@font-face {font-family: "iconfont";
  src: url('../assets/font/iconfont.eot?t=1528767371848'); /* IE9*/
  src: url('../assets/font/iconfont.eot?t=1528767371848#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../assets/font/iconfont.ttf?t=1528767371848') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
}
.iconfont {
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-faxian:before { content: "\e605"; }

.icon-profile:before { content: "\e600"; }

.icon-icon-:before { content: "\e601"; }

.icon-SSS:before { content: "\e603"; }

.icon-faxian1:before { content: "\e606"; }

.icon-sousuo:before { content: "\e612"; }
</style>
